<!-- subpkg_consult/order_list/components/order-list.vue -->
<script lang="ts" setup>
  import { orderListApi } from '@/apis/consult'
  import type { OrderItem } from '@/types/consult'
  import { ref } from 'vue'

  // 从父组件获取订单类型type
  const props = defineProps<{
    type: string
  }>()
  const current = ref(1)
  const pagesize = 3
  const orderList = ref([] as OrderItem[])
  const getOrderList = async () => {
    const res = await orderListApi({
      type: props.type,
      current: current.value + '',
      pageSize: pagesize + '',
    })
    console.log(res)
    orderList.value.push(...res.rows)
    if (orderList.value.length >= res.total) {
      hasMore.value = false
    } else {
      current.value++
    }
    // 没有更多数据
    loadingStatus.value = hasMore.value ? 'more' : 'noMore'
  }
  const hasMore = ref(true)
  const loadingStatus = ref('loading')
  const loadMore = () => {
    if (hasMore.value) {
      getOrderList()
    }
  }

  getOrderList()

  // 2. 监听下拉刷新
  const isRefreshing = ref(false)
  const refreshData = async () => {
    // console.log('refreshData')
    isRefreshing.value = true
    hasMore.value = true
    orderList.value = []
    current.value = 1
    await getOrderList()
    isRefreshing.value = false
  }
</script>

<template>
  <scroll-view
    @scrolltolower="loadMore"
    @refresherrefresh="refreshData"
    refresher-enabled
    :refresher-triggered="isRefreshing"
    refresher-background="#f6f6f6"
    class="uni-scroll-view"
    scroll-y
  >
    <view class="consult-list">
      <view class="consult-list-item" v-for="item in orderList" :key="item.id">
        <view class="consult-header">
          <view class="label">
            <image class="doctor-avatar" :src="item.docInfo?.avatar" />
            <text
              >{{ item.typeValue }}( {{ item.docInfo?.gradeName }} -
              {{ item.docInfo?.name }} )</text
            >
          </view>
          <text class="status color-1">{{ item.statusValue }}</text>
        </view>

        <navigator class="consult-body" hover-class="none" url="/subpkg_consult/order_detail/index">
          <uni-list :border="false">
            <uni-list-item :border="false" title="病情描述" :right-text="item.illnessDesc" />
            <uni-list-item :border="false" title="价格" :right-text="`¥ ${item.payment}.00`" />
            <uni-list-item :border="false" title="创建时间" :right-text="item.createTime" />
          </uni-list>
        </navigator>

        <view class="consult-footer">
          <button class="uni-button minor">取消订单</button>
          <button class="uni-button">继续支付</button>
        </view>
      </view>

      <!-- 加载状态 -->
      <uni-load-more
        :status="loadingStatus"
        color="#C3C3C5"
        :icon-size="16"
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '数据正在加载中',
          contentnomore: '没有更多数据了',
        }"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './styles.scss';
</style>
